<template>
  <div class="messageCenter">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('market.unread')" name="read">
        <unread ref="read" :msg="1" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.notHandled')" name="notHandled">
        <unread ref="notHandled" :msg="2" />
      </el-tab-pane>
      <el-tab-pane :label="$t('market.entire')" name="complete">
        <whole :tab-whole="tabWhole" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import unread from './unread'
import whole from './whole'

export default {
  name: 'MessageCenter',
  components: {
    unread,
    whole
  },
  data() {
    return {
      activeName: 'read',
      tabWhole: false
    }
  },
  methods: {
    handleClick(ev) {
      if (ev.name === 'read') {
        this.$refs.read.getUnreadData(1)
      } else if (ev.name === 'notHandled') {
        this.$refs.notHandled.getUnreadData(2)
      }
      this.tabWhole = true
    }
  }
}
</script>

<style scoped lang="scss">
.messageCenter {
  padding: 10px;
  background: #fff;
}
</style>
